<template>
  <div class="targetContainer">
    <div class="headerContainer">
      <FormQuery ref="formQuery" :initial-form-data="initialFormData" @query="handleQuery" @reset="handleReset" />
    </div>
    <div class="contentContainer">
      <div class="left_content">
        <CesiumConViewer ref="cesiumViewer" :cesium-data="cesiumData" />
      </div>
      <div class="right_content">
        <div class="right_content_top">
          <bar-chart :data="barData1" :title="titleBar1" />
        </div>
        <div class="right_content_bottom">
          <bar-chart :data="barData2" :title="titleBar2" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BarChart from "@/components/BarChart/index.vue";
import FormQuery from "@/components/FormQuery/index.vue";
import CesiumConViewer from "@/components/CesiumConViewer/index.vue";
import {
  getQueryHisSituation,
  getStatByDeviation,
  getStatByContinuity
} from "@/api/datarecord/index.js";

export default {
  name: "TrackQualityStatistics",
  components: { BarChart, FormQuery, CesiumConViewer },
  data() {
    return {
      cesiumData: {},
      barData1: [],
      barData2: [],
      initialFormData: {
        dateRange: [],
        targetType: "",
        batchNo: "",
      },
      queryResult: {},
      titleBar1: "测量",
      titleBar2: "航迹连续性",
    };
  },
  mounted() {
    this.getBarDataToChild1();
    this.getBarDataToChild2();
  },
  methods: {
    getBarDataToChild1() {
      const params = { ...this.queryResult };
      getStatByDeviation(params)
        .then((res) => {
          if (res.code === 200) {
            console.log("++++",res)
            this.barData1 = res.data;
          } else {
            this.$message.error(res.msg || "获取数据失败");
          }
        })
        .catch((error) => {
          console.error("API Error:", error);
          this.$message.error("请求数据失败");
        })
        .finally(() => { });
    },
    getBarDataToChild2() {
      const params = { ...this.queryResult };
      getStatByDeviation(params)
        .then((res) => {
          if (res.code === 200) {
            this.barData2 = res.data;
          } else {
            this.$message.error(res.msg || "获取数据失败");
          }
        })
        .catch((error) => {
          console.error("API Error:", error);
          this.$message.error("请求数据失败");
        })
        .finally(() => { });
    },
    async getHistoryHandle() {
      try {
        const res = await getQueryHisSituation({ ...this.queryResult });
        if (res.code == 200) {
          this.$message.success("查询成功！");
          this.cesiumData = res.data;
        }
      } catch (error) { }
    },
    // 处理查询事件
    handleQuery(formData) {
      this.queryResult = {
        ...formData,
      };
      this.getHistoryHandle();
    },

    // 处理重置事件
    handleReset() {
      this.queryResult = null;
      this.$message.info("已清除查询条件");
      this.$refs.cesiumViewer.clearTracks();
    },

    // 清除表单（外部调用）
    clearForm() {
      this.$refs.formQuery.resetForm();
    },
  },
};
</script>
<style lang="scss" scored>
.targetContainer {
  height: 100vh;
  background-color: #0e1832;
  padding: 20px;

  .headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(13, 138, 188, 0.3);
    background-color: #0f3350;
    border-radius: 8px;
    height: 60px;
    color: #fff;
  }

  .contentContainer {
    display: flex;
    justify-content: space-between;
    height: calc(100% - 100px);

    .left_content {
      width: calc(100% - 600px);
    }

    .right_content {
      width: 580px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .right_content_top {
        height: 350px;
      }
    }
  }
}
</style>
